import React, { Component } from "react";
import { Modal,TouchableOpacity, StyleSheet, Text, TouchableHighlight, View } from "react-native";
import { Actions } from 'react-native-router-flux';

class ModalExample extends Component {
  constructor(props) {
    super(props);
    this.state = { modalVisible: true };
  }
  setModalVisible(visible) {
    this.setState({ modalVisible: visible });
  }
  render() {
    // const data = this.props.data || 'null';
    // alert(this.state.modalVisible);
    // this.setModalVisible(true);
    return (
        <Modal
          animationType="slide"
          transparent={false}
          visible={this.state.modalVisible}
          // visible={true}
          onRequestClose={() => {
            alert("Modal has been closed.");
          }}
        >
          <View style={styles.container}>
            <View style={styles.boxTop}>
              <Text>Hello World!</Text>

              <TouchableOpacity onPress={Actions.pop}>
                <Text>Close</Text>
              </TouchableOpacity>
              {/* <TouchableHighlight
                onPress={
                  // this.setModalVisible(!this.state.modalVisible);
                  Actions.pop
                }
              >
                <Text>Hide Modal</Text>
              </TouchableHighlight> */}
            </View>
          </View>
        </Modal>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'space-between',
    alignItems: 'center',
    backgroundColor:'#ccc'
  },
  boxTop: {
    marginTop: 20,
    flex:1,
    backgroundColor:'#158fff'
  }
})

export default ModalExample;
